<template>
 <div class="search_box">
 	<div class="search_content layui-row">
 		<div @mouseleave="show=false" class="select layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs4">
			<div class="select">
				<div @click="selectedFn" class="selected">
					<img :src="opactions[curIndex].icon" alt="">
					{{ opactions[curIndex].text }}
					<van-icon style="vertical-align:-20%;" color="#999" :name="show ? 'arrow-up' : 'arrow-down'" size="16px"/>
				</div>
				<ul v-show="show">
					<li class="txt_ellip" @click="selectFn(index)" v-for="(item,index) in opactions" :key="index">
						<img :src="item.icon" alt="">{{ item.text }}
					</li>
				</ul>
			</div>
 		</div>
 		<input placeholder="请输入搜索关键字" 
			@focusin="show=false"
			class="search_input layui-col-lg8 layui-col-md8 layui-col-sm6 layui-col-xs4" 
			type="text" 
			@keydown.enter="searchFn"
			@keyup="keyUpFn"
			v-model="keyword" />
 	    <div class="search_btn layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs4">
			<span class="search_icon" @click="searchFn">搜索</span>
			<span @click="clearFn"><van-icon color="#ccc" name="clear" size="18px"/></span>
 		</div>
 	</div>
 </div>
</template>

<script>
import { Icon } from "vant"
export default {
  name: 'search',
  data(){
	  return {
		  curIndex:0,
		  show:false,
		  keyword:""
	  }
  },
  props:{
	  opactions:{
		  type:Array,
		  default:()=>{
			  return []
		  }
	  }
  },
  components:{
	[Icon.name]:Icon  
  },
  methods:{
	  clearFn(){
		  this.keyword=""
		  this.$emit('keyUpEmit',this.keyword)
	  },
	  selectedFn(){
		  this.show=!this.show
	  },
	  selectFn(index){
		  this.curIndex=index
		  this.show=false
	  },
	  searchFn(){
		  if(this.keyword){
			  var searchApi=this.opactions[this.curIndex].api
			      window.open(searchApi+this.keyword)
		  }
	  },
	  keyUpFn(){
		  this.$emit('keyUpEmit',this.keyword)
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.search_box{
	padding:0;
}
.search_content{
	height: 45px;
	float: none;
	background: #fff;
	border-radius: 45px;
	margin: auto;
}
.search_input{
	height: 45px;
	line-height: 45px;
	border: 0;
	background: #fefefe;
	font-size: 16px;
	padding: 0 10px;
}
.select{
	height: 45px;
	border-radius: 45px 0 0 45px;
}
.search_btn{
	text-align: center;
	height: 45px;
	line-height: 45px;
	cursor: pointer;
	span{
		display: inline-block;
		height: 45px;
		width: 30px;
		float: right;
	}
	.search_icon{
		width: 50%;
		background: rgb(231, 76, 60);
		height: 43px;
		border: 1px #fff solid;
		border-radius: 45px;
		color: #fff;
		font-size: 18px;
	}
	i{
		vertical-align: middle;
	}
}
.select{
	position: relative;
	font-size: 14px;
	text-align: center;
	.selected{
		padding: 0 10px;
		height: 45px;
		line-height: 45px;
		cursor: pointer;
		img{
			height: 30px;
			vertical-align: middle;
			margin-right:5px;
		}
	}
	ul{
		position: absolute;
		z-index: 9999;
		width: 100%;
		top: 45px;
		left: 0;
		background: #fff;
		box-shadow: 0 7px 15px #ccc;
		li{
			height: 45px;
			line-height: 45px;
			padding: 5px 10px;
			&:hover{
				background: #eee;
				cursor: pointer;
			}
			img{
				height: 30px;
				vertical-align: middle;
				margin-right:5px;
			}
		}
	}
}
</style>
